- Main
- Introduction
- Getting started
- Starter kit
- RTL layout
- Basic functionality
- LESS and CSS
- Compiling LESS
- Compiling LESS for RTL version
- Plugins
- Bootstrap
- Color system
- Helpers
- Themes
- Layout options
- Markup
- Sidebars
- Navbars
- Vertical navigation
- Horizontal navigation
- Page header
- Footer
- Other
- Sources and credits
- Changelog version 2.0
Limitless - Footer
- Home
- Footer
Overview
Basically footer is a completely optional component, displayed at the bottom of the page. Limitless layout allows us to display footer component always at the bottom of the page, despite its height. Yes, it's always sticked to the bottom. It can be a simple <div /> element with .footer class or a more complex thing with navbar component and full featured navigation, even mega menu with multiple level navigation. Also footer can be either fixed or static (default).
Depending on the layout version, position of the footer container can be different. For example, first and second layout display footer component inside <div class="content" /> content container. But third and fourth layouts footer component is placed inside <div class="content-wrapper" /> container, because <div class="content" /> is omitted, so in these layouts it takes 100% width of the page.
Footer markup
Below you'll find examples of markup used in different layout versions and as different components. Note: although navbar can be used as a footer component with copyright info and other navbar components, fixed navbar option requires some JS tricks if you want to display it inside content area only. By default fixed navbar in footer has always 100% width.
Default footer component markup in first and second layouts:
<!-- Main content -->
<div class="content-wrapper">
<!-- Page header -->
<div class="page-header">
[page header content]
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
[main content]
<!-- Footer -->
<div class="footer text-muted">
© 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
</div>
<!-- /footer -->
</div>
<!-- /content area -->
</div>
<!-- /main content -->
Default footer component markup in third and fourth layouts:
<!-- Main content -->
<div class="content-wrapper">
[main content]
<!-- Footer -->
<div class="footer text-muted">
© 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
</div>
<!-- /footer -->
</div>
<!-- /main content -->
Using navbar component as a footer component in first and second layouts:
<!-- Main content -->
<div class="content-wrapper">
<!-- Page header -->
<div class="page-header">
[page header content]
</div>
<!-- /page header -->
<!-- Content area -->
<div class="content">
[main content]
<!-- Footer -->
<div class="navbar navbar-default navbar-sm navbar-fixed-bottom">
<!-- Toggle button -->
<ul class="nav navbar-nav no-border visible-xs-block">
<li>
<a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-second">
<i class="icon-circle-up2"></i>
</a>
</li>
</ul>
<!-- /toggle button -->
<!-- Navbar content -->
<div class="navbar-collapse collapse" id="navbar-second">
<div class="navbar-text">
© 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
</div>
<div class="navbar-right">
[right side content]
</div>
</div>
<!-- /navbar content -->
</div>
<!-- /footer -->
</div>
<!-- /content area -->
</div>
<!-- /main content -->
Using navbar component as a footer component in third and fourth layouts:
<!-- Main content -->
<div class="content-wrapper">
[main content]
<!-- Footer -->
<div class="navbar navbar-default navbar-sm navbar-fixed-bottom">
<!-- Toggle button -->
<ul class="nav navbar-nav no-border visible-xs-block">
<li>
<a class="text-center collapsed" data-toggle="collapse" data-target="#navbar-second">
<i class="icon-circle-up2"></i>
</a>
</li>
</ul>
<!-- /toggle button -->
<!-- Navbar content -->
<div class="navbar-collapse collapse" id="navbar-second">
<div class="navbar-text">
© 2015. <a href="#">Limitless Web App Kit</a> by <a href="http://themeforest.net/user/Kopyov" target="_blank">Eugene Kopyov</a>
</div>
<div class="navbar-right">
[right side content]
</div>
</div>
<!-- /navbar content -->
</div>
<!-- /footer -->
</div>
<!-- /main content -->